<template>
    <div>
        <van-nav-bar
                title="订单详情"
                left-arrow
                :fixed="true"
                class="my-nav"
                @click-left="$router.back(-1)"
        />
        <div style="margin-top: 45px; margin-bottom: 100px; background: #f6f6f6 ;color: #666; font-size: 14px;">
            <div class="van-notice-bar" style="text-align: center">
                <div style="margin: auto;">{{goods.order_status}}</div>
            </div>
            <div style="padding: 15px 20px;  background: #fff; margin-top: 10px;">
                <div style="display: inline-block">
                    您提交了订单， 请等待系统确认
                    <br>
                    <div style="font-size: 12px;margin-top: 10px;">
                        订单号： {{goods.order_number}}
                    </div>

                </div>
                <van-icon name="arrow" style="float: right; margin-top: 16px"/>
            </div>
            <div style="padding: 15px 20px;background: #fff; margin-top: 10px; font-size: 12px;">
                <p>订单号 : {{goods.order_number}}</p>
                <p>下单时间 : {{goods.order_time}}</p>
                <p>付款时间 : {{goods.payment_time}}</p>
                <p>发货时间 : {{goods.payment_time}}</p>
                <p>付款方式 : {{goods.payment_method}}</p>
            </div>
            <!-- 联系人卡片 -->
            <van-contact-card
                    type="edit"
                    :name="goods.receiver"
                    :tel="goods.mobile_phone"
                    :editable="false"
            />
            <div v-for="item in goods.goods">
                <van-card
                        :title="item.title"
                        :desc="item.standard"
                        :num="item.count"
                        :price="formatPrice(item.price)"
                        :thumb="item.thumb">
                </van-card>
            </div>

            <div style="background: #fff; margin-top: 10px;padding: 15px 20px;text-align: center">
                <van-icon name="chat" /> 联系客服
            </div>

            <div style="background: #fff; margin-top: 10px;padding: 15px 20px;font-size: 12px;">
                <p>商品总价: {{goods.total_price}}元</p>
                <p>运费: {{goods.freight}}元</p>
                <p>实付总价: {{goods.actually_total_price}}元</p>
            </div>

        </div>
    </div>

</template>

<script>
    import {orderDetail} from '../../api/order'

    export default {
        name: "order-detail",
        data() {
            return {
                goods: [{
                    id: '1',
                    title: '华为畅想8plus',
                    desc: '4+128/全网通/黑色',
                    price: 138000,
                    num: 1,
                    thumb: 'http://image-jinyijia1688-com.oss-cn-beijing.aliyuncs.com/goods_a458ef4569d05b426347e432a06ab8a0.jpg',
                    stepperLimit: 10
                }, {
                    id: '2',
                    title: '华为畅享8e',
                    desc: '3+32/全网通/黑色',
                    price: 79000,
                    num: 2,
                    thumb: 'http://image-jinyijia1688-com.oss-cn-beijing.aliyuncs.com/goods_86ef79991aeb12ea7a134be65835a9fd.jpg',
                    stepperLimit: 10
                }]
            }
        },
        mounted() {
            orderDetail(this.$route.query, d => {
                if (d) {
                    this.goods = d
                }
            })

        },
        methods: {
            formatPrice(price) {
                return (price).toFixed(2);
            }
        }
    }
</script>

<style scoped>
    .van-contact-card::after {
        content: '';
        left: 0;
        right: 0;
        top: 0;
        height: 2px;
        position: absolute;
        background: -webkit-repeating-linear-gradient(135deg,#ff6c6c 0,#ff6c6c 20%,transparent 0,transparent 25%,#3283fa 0,#3283fa 45%,transparent 0,transparent 50%);
        background: repeating-linear-gradient(-45deg,#ff6c6c 0,#ff6c6c 20%,transparent 0,transparent 25%,#3283fa 0,#3283fa 45%,transparent 0,transparent 50%);
        background-size: 80px;
    }
</style>